<template>
  <div v-if="this.model">
    <nav-bar></nav-bar>
    <div class="detailinfo">
      <div class="title">
        <span>{{ model.title }}</span>
      </div>
      <div class="video">
        <video controls="controls" :src="baseUrl + model.vurl"></video>
      </div>
      <div class="detailinfoText">
        <div>
          <span>{{ model.tagName }}</span>
          <span>{{ model.title }}</span>
        </div>
        <div>
          <span>@ {{ model.uinfo.name }}</span>
          <span>{{ model.click }}次观看</span>
          <span>5281弹幕</span>
          <span>{{ model.time }}</span>
        </div>
        <div>
          <p
            style="cursor: pointer"
            @click="attentionClick"
            :class="{ activeColor: active.like }"
          >
            <span> <i class="el-icon-thumb"></i></span>
            <span>点赞</span>
          </p>
          <p
            @click="collectionClick"
            :class="{ activeColor: active.collection }"
            style="cursor: pointer"
          >
            <span><i class="el-icon-star-on"></i></span>
            <span>收藏</span>
          </p>
          <p
            @click="subscriptClick"
            :class="{ activeColor: active.attention }"
            style="cursor: pointer"
            v-if="user.id != upData.id"
          >
            <span> <i class="el-icon-circle-plus"></i></span>
            <span>关注</span>
          </p>
        </div>
      </div>
      <div class="userInfo">
        <div class="hander">
          <img v-if="!isAdmin" :src="baseUrl + upData.handUrl" />

          <div class="navhander" v-else>
            {{ upData.name }}
          </div>

          <p style="margin-top: 2vh">
            {{ upData.name }} {{ isAdmin ? "_" + upData.phone : "" }}
          </p>

          <span style="margin-left: 3vw">{{ upData.cardCase }}</span>
        </div>
        <p
          :class="{ activeColor: !active.attention, like: true }"
          @click="subscriptClick"
          style="cursor: pointer"
          v-if="user.id != upData.id"
        >
          {{ active.attention ? "已关注" : "关注" }}
        </p>
      </div>

      <comment-title />

      <comment :upId="this.upData.id" />

      <!-- <div class="inputBack">
        <input
          v-model="mycom.content"
          ref="Backipt"
          type="text"
          placeholder="说点什么吧"
          style="cursor: pointer"
          @blur="outfocus"
          @keyup.enter="Reply"
        />
        <button @click="Reply" style="cursor: pointer">发表</button>
      </div> -->
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/Navbar.vue";
import cover from "@/components/common/cover";
import commentTitle from "@/components/article/commentTitle.vue";
import comment from "@/components/article/comment.vue";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      model: null,
      upData: null,
      comments: null,
      // mycom: {
      //   content: "",
      //   vid: "",
      //   parentId: null,
      //   uid: "",
      //   pname: "",
      // },
      active: {
        collection: false,
        like: false,
        attention: false,
      },
    };
  },
  components: {
    NavBar,
    cover,
    commentTitle,
    comment,
  },
  computed: {
    ...mapGetters(["baseUrl", "isLogin", "user", "isAdmin"]),
  },
  methods: {
    //获取视频信息
    async articleitemData() {
      const { data: res } = await this.$http.get(
        "/videos/detail/" + this.$route.params.id
      );

      if (res.code == 200) {
        this.model = res.data;
        // // 初始化
        this.upData = this.model.uinfo;

        if (localStorage.getItem("isLogin")) {
          this.subscritionInit();
          this.collectionInit();
          this.attentionInit();
        }
      }
    },

    // 发送评论
    // async Reply() {
    //   console.log(111);
    //   if (!this.isLogin) {
    //     this.$msg.fail("请先登录");
    //     return;
    //   }

    //   if (this.mycom.length < 1) {
    //     this.$msg.fail("内容不能为空");
    //     return;
    //   }

    //   this.mycom.vid = this.$route.params.id;
    //   this.mycom.uid = this.user.id;
    //   console.log(this.mycom);
    //   const { data: res } = await this.$http.post("/comments", this.mycom);
    //   if (res.code == 200) {
    //     this.$msg.fail("回复成功");
    //     this.mycom.content = "";
    //   }
    // },
    // // 聚焦输入框
    // PostChildClick(cid, pName) {
    //   this.mycom.parentId = cid;
    //   this.mycom.pname = pName;
    //   this.$nextTick(() => {
    //     this.$refs.Backipt.focus();
    //   });
    //   $(".inputBack").css("visibility", "visible");
    // },
    // // 失去焦点
    // outfocus() {
    //   $(".inputBack").css("visibility", "hidden");
    // },

    // 点赞
    async attentionClick() {
      if (!this.isLogin) {
        this.$msg.fail("请先登录");
        return;
      }
      var obj = {
        uid: this.user.id,
        vid: this.model.id,
      };
      const { data: res } = await this.$http.post("/likes", obj);
      this.active.like = !(res.data == null);
    },
    // 收藏
    async collectionClick() {
      if (!this.isLogin) {
        this.$msg.fail("请先登录");
        return;
      }
      var obj = {
        uid: this.user.id,
        vid: this.model.id,
      };

      const { data: res } = await this.$http.post("/collection", obj);
      if (res.code == 200) {
        this.active.collection = !(res.data == null);
      }
    },

    // 点击关注
    async subscriptClick() {
      if (!this.isLogin) {
        this.$msg.fail("请先登录");
        return;
      }

      var obj = {
        fIng: this.user.id,
        fEd: this.upData.id,
      };
      const { data: res } = await this.$http.post("/follow", obj);

      this.active.attention = !(res.data == null);
    },

    // 进入页面-点赞
    async attentionInit() {
      var obj = {
        uid: this.user.id,
        vid: this.model.id,
      };
      const { data: res } = await this.$http.post("/likes/init", obj);
      if (res.code == 200) {
        this.active.like = res.data;
      }
    },

    // 进入页面-关注
    async subscritionInit() {
      var obj = {
        fIng: this.user.id,
        fEd: this.upData.id,
      };
      const { data: res } = await this.$http.post("/follow/init", obj);
      if (res.code == 200) {
        this.active.attention = res.data;
      }
    },

    // 进入页面-收藏
    async collectionInit() {
      var obj = {
        uid: this.user.id,
        vid: this.model.id,
      };
      const { data: res } = await this.$http.post("/collection/init", obj);
      if (res.code == 200) {
        this.active.collection = res.data;
      }
    },
  },
  created() {
    this.articleitemData();
  },
  watch: {
    $route() {
      this.articleitemData();
    },
  },
};
</script>

<style lang="less" scoped>
.del {
  display: block !important;
}
.detailinfo {
  background-color: white;
  overflow-x: hidden;
  .title {
    transform: translate(11vw, 8vh);
    span {
      font-size: 1rem;
    }
  }
  .video {
    margin-top: 4vw;
    margin-left: 10vw;
    width: 55%;
    box-sizing: border-box;
    video {
      border: 1px solid rgb(148, 145, 145);
      width: 100%;
      border-radius: 0.2vw;
    }
  }
}
.detailinfoText {
  width: 80%;
  margin-left: 9vw;
  padding: 2vw;
  div:nth-child(1) {
    font-size: 1.5vw;
    font-weight: 200;
    span:nth-child(1) {
      padding: 0 1.5vw;
      color: #fb7299;
      background-color: #f4f4f4;
      border-radius: 2.778vw;
      margin-right: 3vw;
    }
  }
  div:nth-child(2) {
    padding-top: 2vw;
    padding-bottom: 0.5vw;
    span {
      color: #aaa;
      font-size: 1vw;
      margin-right: 2.778vw;
    }
    span:nth-child(1) {
      color: rgb(92, 205, 246);
      font-size: 1.5vw;
      padding-right: 2.778vw;
    }
  }
  div:nth-child(3) {
    display: flex;
    margin-left: 13vw;

    p {
      margin-right: 2vw;
      display: flex;
      align-items: center;
      color: #757575;
      span:nth-child(1) {
        margin-right: 3px;
        font-size: 1vw;
      }
      span:nth-child(2) {
        font-size: 1vw;
      }
    }
    .activeColor {
      color: #fb7299 !important;
    }
  }
}
.userInfo {
  position: absolute;
  left: 68vw;
  top: 5.5vw;
  width: 20vw;
  .like {
    margin-left: 4vw;
    width: 8vw;
    padding: 0.2vw;
    text-align: center;
    color: white;
    font-size: 1vw;
    border-radius: 0.5vw;
    background-color: #aaa;
  }
}
.hander {
  img {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
  }
  p {
    position: absolute;
    top: -1vw;
    left: 4vw;
    font-size: 1.3vw;
  }
  span {
    position: relative;
    left: 0.7vw;
    top: -0.45vw;
    color: rgb(152, 154, 164);
  }
}
.detailparent {
  position: absolute;
  right: 0vw;
  top: 15vw;
  width: 28%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgba(227, 229, 231, 0.2);
  .detailitem {
    margin: 0.5vw 0;
    width: 60%;
  }
  span {
    width: 40vw;
    height: 3.5vw;
    p {
      margin-left: 3vw;
      color: rgb(135, 135, 136);
    }
  }
}
.navhander {
  height: 2.5vw;
  width: 2.5vw;
  line-height: 2.5vw;
  text-align: center;
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  background-color: #00aeec;
  background-size: cover;
}
.inputBack {
  position: fixed;
  bottom: 0;
  width: 68%;
  padding: 1vw;
  z-index: 10;
  border-top: 1px solid rgb(227, 229, 231);
  background-color: #fff;
  visibility: hidden;
  height: 25vh;

  input {
    outline: none;
    border: 0;
    background-color: #f4f4f4;
    border-radius: 1vw;
    font-size: 1vw;
    padding: 0 1vw 0 2vw;
    margin-left: 30vw;
    height: 2.5vw;
    width: 28vw;
  }
  button {
    outline: none;
    border: 0;
    border-radius: 1vw;
    background: rgb(92, 205, 246);
    color: white;
    font-size: 1vw;
    padding: 0 1vw;
    height: 2vw;
    margin-left: 2vw;
    margin-top: 1vw;
  }
}
</style>